<template>
  <div class="list">
    <div class="box">
      <div class="header">
        <div class="item-text box-title">企业结构</div>
      </div>
      <div>
        <div class="condition-item">
          <div class="condition-item-title">已选条件</div>
          <div
            class="condition-item-right condition-item-selected"
            v-for="item in selected"
            :key="item.label"
          >
            {{ item.label }}
          </div>
        </div>
        <div class="condition-item">
          <div class="condition-item-title">筛选条件</div>
          <div class="condition-item-right">
            <el-select
              v-model="zhuce_index"
              size="small"
              @change="changeZhuce"
              placeholder="注册资本"
            >
              <el-option
                v-for="item in zhuce"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>

          <div class="condition-item-right">
            <el-select v-model="status" clearable placeholder="请选择企业状态">
              <el-option
                v-for="item in statusList"
                :key="item.status_id"
                :value="item.status_id"
                :label="item.name"
              />
            </el-select>
          </div>
        </div>
      </div>
    </div>
    <div style="margin-bottom: 24px"></div>
    <div class="box">
      <div class="chart-title">单位(户)</div>
      <Chart ref="chart"></Chart>
    </div>
    <div style="margin-bottom: 24px"></div>
    <div class="box">
      <el-table
        class="list-table"
        stripe
        border
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column prop="hangye_name" label="分析维度" width="180">
        </el-table-column>
        <el-table-column prop="count" label="企业数量（户）"> </el-table-column>
        <el-table-column label="所占比例">
          <template slot-scope="scope">
            <el-progress :percentage="scope.row.bili"></el-progress>
          </template>
        </el-table-column>
      </el-table>
      <!-- <page
        :total="total"
        :current.sync="condition.page"
        :size.sync="condition.size"
        @change="search"
      />-->
    </div>
  </div>
</template>

<script>
import Chart from "./components/duo";
import { fetchRegion, fetchIndustry, fetchStatus } from "@/api";

import Page from "@/components/list/page";
import Api from "@/api/companyMap";
export default {
  components: {
    Page,
    Chart,
  },
  data() {
    return {
      total: 100,
      tableData: [
        {
          id: 123,
        },
      ],
      zhuce_index: "", //注册资金
      status: "", //企业状态
      statusList: [],
      selected: [],
      zhuce: [
        {
          value: 0,
          label: "全部汇总",
        },
        {
          value: 2,
          label: "0-10万元",
        },
      ],
      hello: "33",
      params: {
        page: 1,
        pagesize: 10,
        fenxi: 1,
        lat: "",
        lng: "",
        radius: "",
      },
      loading: true,
      condition: {
        page: 1,
        size: 10,
      },
    };
  },
  created() {
    this.params.radius = this.$route.query.radius;
    this.params.lat = this.$route.query.lat;
    this.params.lng = this.$route.query.lng;
    this.params.map = this.$route.query.map;
    this.search();
    this.getStatus();
  },
  methods: {
    getStatus() {
      fetchStatus((res) => {
        this.statusList = res.data;
      });
    },
    changeZhuce(event) {
      console.log(event);
      let index = this.zhuce.findIndex((item) => {
        return item.value == event;
      });
      this.selected.push({ type: "zhuce", label: this.zhuce[index].label });
    },
    search() {
      Api.fetchMapCompanies(
        this.params,
        (res) => {
          if (res.code == 200) {
            this.tableData = res.aggregations;
            this.$refs.chart.changeData(res.aggregations);
          }
        },
        (err) => {
          this.loading = false;
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/map/analysis/index";
</style>

<style>
.el-table thead {
  color: #2f3133;
}
.el-table th {
  background-color: #f5f7f9;
}
.chart-title {
  margin-left: 16.5px;

  font-size: 12px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: #4d4d4d;
  line-height: 39px;
}
.search {
  display: flex;
  align-items: center;
}
.condition-item {
  height: 59px;
  align-items: center;
  margin-left: 24px;
  display: flex;
}
.condition-item-title {
  font-size: 11px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: #606266;
  line-height: 60px;
}
.condition-item-right {
  margin-left: 12.75px;
}
.condition-item-selected {
  height: 24px;
  background: #ffffff;
  border: 1px solid #0076fe;
  border-radius: 2px;
  padding-left: 11.25px;
  padding-top: 6.75px;
  padding-bottom: 6.75px;
  padding-right: 11.25px;
  font-size: 11px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: #0076fe;
  display: flex;
  align-items: center;
}
</style>
